<template>
   <div>
      <ul class="all">
          <li class="phone" @click="userBindPhone">
             <div class="left">
                 <img src="../assets/手机号@3x.png" alt="">
                  <span>手机号</span>
             </div>
             <div class="right">
                 <span>{{tel || '未绑定'}}</span>
                 <img src="../assets/我的，更多@3x.png" alt="">
             </div>
          </li>
          <li class="weixin" @click="binDing">
              <div class="left">
                  <img src="../assets/微信号@3x.png" alt="">
                  <span>微信</span>
              </div>
             <div class="right">
                 <span>{{hintMessage}}</span>
                 <img src="../assets/我的，更多@3x.png" alt="">
             </div>
          </li>
      </ul>
   </div>
</template>
<script>
export default {
    data() {
        return {
            wx: null,
            hintMessage:'未授权'
        }
    },
    created() {
        this.wx = this.utils.cookie('get','wx_message') || null
        if(this.wx){
            this.hintMessage = '已授权'
        }
        
    },
    computed:{
        tel(){
            return this.$store.state.userMessage.userTel
        }
    },
    methods: {
        // 修改手机号
        userBindPhone() {
            if(!this.utils.cookie('get','wx_message')){
                return mui.toast('请打开微信授权')
            }
            this.$router.push({ path: '/user/user_bind_phone' })
        },
        //   绑定微信
        binDing() {
            return
            if (!this.utils.browser.weixin) {
                mui.toast('请在微信浏览器打开')
            }else{
                if(this.wx != ''){
                    this.utils.$get(this.utils.GET_WX_MESSAGE,data=>{
                        mui.toast('绑定成功')
                    })
                }
            }
        }
    }
}
</script>

<style lang="less">
.all {
    margin-top: 0.2rem;
    width: 100%;
    .phone {
        height: 1rem;
        width: 100%;
        border-bottom: 1px solid lightgrey;
        .left {
            margin-left: 0.2rem;
            display: inline-block;
            line-height: 0.79rem;
            //    height:.4rem;
            //    margin-top: .3rem;
            > img {
                vertical-align: middle;
                width: 0.65rem;
                height: 0.65rem;

                border-radius: 50%;
            }
            > span {
                padding-left: 0.2rem;
                font-size: 0.28rem;
                color: #333333;
            }
        }
        .right {
            float: right;
            //    display: inline-block;
            line-height: 0.79rem;
            margin-right: 0.24rem;
            > span {
                font-size: 0.28rem;
                color: #999999;
            }
            > img {
                width: 0.35rem;
                height: 0.35rem;
                padding-left: 0.12rem;
            }
        }
    }
    .weixin {
        height: 1rem;
        width: 100%;
        .left {
            margin-left: 0.2rem;
            display: inline-block;
            line-height: 1.09rem;
            //  display: flex;
            //  align-items:center;
            > img {
                vertical-align: middle;
                width: 0.65rem;
                height: 0.65rem;
                border-radius: 50%;
            }
            > span {
                padding-left: 0.2rem;
                font-size: 0.28rem;
                color: #333333;
            }
        }
        .right {
            float: right;
            line-height: 1.09rem;
            margin-right: 0.24rem;
            > span {
                font-size: 0.28rem;
                color: #999999;
            }
            > img {
                width: 0.35rem;
                height: 0.35rem;
                padding-left: 0.12rem;
            }
        }
    }
}
</style>

